<template>
  <!-- 用户抗身份识别 -->
  <div class="page-x" style="width: 100%; height: 100%">
    <div style="width: 100%; height: 100%" id="chart" ref="chart"></div>
    <!-- 形状说明 -->
    <div class="shape-legend">
      <div class="shape-item">
        <div class="shape-icon circle"></div>
        <span>微博</span>
      </div>
      <div class="shape-item">
        <div class="shape-icon triangle"></div>
        <span>知乎</span>
      </div>
    </div>
    
    <div class="legend">
      <div class="legend-item">
        <div class="color-box" style="background-color: #5470c6;"></div>
        <span>中心用户</span>
      </div>
      <div class="legend-item">
        <div class="color-box" style="background-color: #91cc75;"></div>
        <span>微博用户</span>
      </div>
      <div class="legend-item">
        <div class="color-box" style="background-color: #fac858;"></div>
        <span>知乎用户</span>
      </div>
      <div class="legend-item">
        <div class="color-box" style="background-color: #ee6666;"></div>
        <span>二级关系</span>
      </div>
    </div>
    <Dialog2 v-show="dialogShow" ref="dialog2Ref" />

  </div>
</template>

<script>
// 【步骤2】 引入G6
// import G6 from "@antv/g6";
import * as echarts from "echarts";

import Dialog2 from "./dialog2.vue";
export default {
  name: "Started",
  components: { Dialog2 },
  props: ["graphData"],
  data() {
    return {
      rawData: {},
      dialogShow: false,
      dialogShow2: false,
      graph: null,
      isHas: 1,
    };
  },
  watch: {

  },
  mounted() {
   
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
  },
  methods: {
    initData(item) {
     
      //调用组件传递数据
      this.dialogShow = true;
      this.$refs.dialog2Ref.initDataFn(item);
    },
    initData1(item,item2) {
        this.dialogShow = true;
      this.$refs.dialog2Ref.initDataFn1(item,item2);
    },
    initFn(data) {
      //有就销毁
      if(this.chartInstance){
        this.chartInstance.dispose();
      }
      let that = this;
      this.rawData = data;
      this.chartInstance = echarts.init(this.$refs.chart);

      // 处理数据为ECharts需要的格式
      const { nodes, links } = this.processData();
      const option = {
            title: {
            },
            tooltip: {
              formatter: function(params) {
                if (params.dataType === 'node') {
                  return `
                    <div style="text-align:center; padding: 5px;">
                     <img src="${params.data.avatar}" style="width:60px;height:60px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.1)"/><br/>
                      <b>${params.data.name}</b><br/>
                      ID: ${params.data.id}<br/>
                      ${params.data.platform ? '平台: ' + params.data.platform : ''}
                    </div>
                  `;
                }
                return '';
              }
            },
            animationDurationUpdate: 1500,
            animationEasingUpdate: 'quinticInOut',
            series: [{
              type: 'graph',
              layout: 'force',
              force: {
                repulsion: 500,
                edgeLength: 150
              },
              roam: true,
              zoom: 0.6,
              focusNodeAdjacency: true,
              draggable: true,
              data: nodes,
              links: links,
              categories: [
                { name: '中心用户' },
                { name: '微博用户' },
                { name: '知乎用户' },
                { name: '二级关系' }
              ],
              edgeSymbol: ['none', 'arrow'],
              edgeSymbolSize: [0, 10],
              label: {
                show: true,
                position: 'right',
                formatter: '{b}'
              },
              lineStyle: {
                color: 'source',
                curveness: 0.2
              },
              emphasis: {
                lineStyle: {
                  width: 5
                }
              }
            }]
          };
          
          this.chartInstance.setOption(option);
          
          // 响应窗口大小变化
          window.addEventListener('resize', () => this.chartInstance.resize()
        );


       
    },
    processData() {
          const nodes = [];
          const links = [];
          const nodeSet = new Set();
          debugger;
          console.log("this.rawData",this.rawData);
          // 添加中心节点
          const centerNode = {
            id: this.rawData.userId,
            name: this.rawData.name,
            symbolSize: [80, 80],
            symbol: `image://${require('@/assets/images/profile1.jpg')}`,
            symbolKeepAspect: true,
            symbolClip: true,
            itemStyle: { color: '#5470c6' },
            category: 0,
            fixed: true,
            x: this.$refs.chart.offsetWidth / 2,
            y: this.$refs.chart.offsetHeight / 2
          };
          nodes.push(centerNode);
          nodeSet.add(this.rawData.userId);
          
          // 处理微博数据
          this.rawData.weiboUserList.forEach(weibo => {
            // 微博源节点（中心用户的微博账号）
            const weiboSourceId = `weibo_${weibo.source.userId}`;
            if (!nodeSet.has(weiboSourceId)) {
              nodes.push({
                id: weiboSourceId,
                name: weibo.source.userNickname || weibo.source.userName,
                symbolSize: 35,
                avatar: weibo.source.avatar,
                itemStyle: { color: '#91cc75' },
                platform: '微博',
                category: 1,
                fixed: true,
                x: this.$refs.chart.offsetWidth / 2 - 1000,
                y: this.$refs.chart.offsetHeight / 2
              });
              nodeSet.add(weiboSourceId);
              
              // 连接中心用户和微博账号
              links.push({
                source: centerNode.id,
                target: weiboSourceId,
                label: {
                  show: true,
                  formatter: '主账号'
                },
                lineStyle: {
                  width: 4,
                  curveness: 0
                }
              });
            }
            
            // 微博目标节点
            const weiboTargetId = `weibo_${weibo.target.userId}`;
            if (!nodeSet.has(weiboTargetId)) {
              nodes.push({
                id: weiboTargetId,
                name: weibo.target.userName,
                avatar: weibo.target.avatar,
                symbolSize: 30,
                itemStyle: { color: '#91cc75' },
                platform: '微博',
                category: 1
              });
              nodeSet.add(weiboTargetId);
            }
            
            // 连接微博源和目标
            links.push({
              source: weiboSourceId,
              target: weiboTargetId
            });
            
            // 处理二级关系
            if (weibo.target.children) {
              weibo.target.children.forEach(child => {
                const childId = `weibo_${child.userId}`;
                if (!nodeSet.has(childId)) {
                  nodes.push({
                    id: childId,
                    name: child.userNickname || child.userName,
                    symbolSize: 25,
                    avatar: child.avatar,
                    itemStyle: { color: '#ee6666' },
                    platform: '微博',
                    category: 3
                  });
                  nodeSet.add(childId);
                }
                
                // 连接目标节点和二级节点
                links.push({
                  source: weiboTargetId,
                  target: childId
                });
              });
            }
          });
          
          // 处理知乎数据
          this.rawData.zhihuUserList.forEach(zhihu => {
            // 知乎源节点（中心用户的知乎账号）
            const zhihuSourceId = `zhihu_${zhihu.source.userId}`;
            if (!nodeSet.has(zhihuSourceId)) {
              nodes.push({
                id: zhihuSourceId,
                name: zhihu.source.userNickname || zhihu.source.userName,
                symbolSize: 35,
                symbol: 'triangle',
                avatar: zhihu.source.avatar,
                itemStyle: { color: '#fac858' },
                platform: '知乎',
                category: 2,
                fixed: true,
                x: this.$refs.chart.offsetWidth / 2 + 1000,
                y: this.$refs.chart.offsetHeight / 2
              });
              nodeSet.add(zhihuSourceId);
              
              // 连接中心用户和知乎账号
              links.push({
                source: centerNode.id,
                target: zhihuSourceId,
                label: {
                  show: true,
                  formatter: '主账号'
                },
                lineStyle: {
                  width: 4,
                  curveness: 0
                }
              });
            }
            
            // 知乎目标节点
            const zhihuTargetId = `zhihu_${zhihu.target.userId}`;
            if (!nodeSet.has(zhihuTargetId)) {
              nodes.push({
                id: zhihuTargetId,
                name: zhihu.target.userName,
                avatar: zhihu.target.avatar,
                symbolSize: 30,
                symbol: 'triangle',
                itemStyle: { color: '#fac858' },
                platform: '知乎',
                category: 2
              });
              nodeSet.add(zhihuTargetId);
            }
            
            // 连接知乎源和目标
            links.push({
              source: zhihuSourceId,
              target: zhihuTargetId
            });
          });
          
          return { nodes, links };
        }
  },
};
</script>

<style scoped>
.g6-x {
  width: 800px;
  height: 500px;
  box-sizing: border-box;
}
.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  color: #0099ff;
  text-align: center;
  padding: 50px;
}

.zindexModel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 形状说明样式 */
.shape-legend {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.shape-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.shape-item:last-child {
  margin-bottom: 0;
}

.shape-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  display: inline-block;
}

.shape-icon.circle {
  border-radius: 50%;
  background-color: #91cc75;
}

.shape-icon.triangle {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #fac858;
  background: none;
}

/* 图例样式调整 */
.legend {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.legend-item:last-child {
  margin-bottom: 0;
}

.color-box {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 2px;
}
</style>
